<route lang="yaml">
meta:
  whiteList: true
  title: 登录
  constant: true
  layout: false
  </route>

<script lang="ts" setup name="Login">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { ikStore } from 'iking-utils'

const emit = defineEmits(['update:formType'])

const { t } = useI18n()

const loading = ref(false)

// 重置密码
const resetFormRef = ref<FormInstance>()
const resetForm = ref({
  account: ikStore.local.getItem(ELocal.USER_INFO)?.name || '',
  captcha: '',
  newPassword: ''
})
const resetRules = ref<FormRules>({
  account: [
    { required: true, trigger: 'blur', message: '请输入用户名' }
  ],
  captcha: [
    { required: true, trigger: 'blur', message: '请输入验证码' }
  ],
  newPassword: [
    { required: true, trigger: 'blur', message: '请输入新密码' },
    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
  ]
})
function handleReset() {
  ElMessage({
    message: '此处重置密码仅只提供页面,联调请自行扩展',
    type: 'info'
  })
  resetFormRef.value && resetFormRef.value.validate(valid => {
    if (valid) {
      // 这里编写业务代码
    }
  })
}
</script>

<template>
  <el-form
    ref="resetFormRef"
    :model="resetForm"
    :rules="resetRules"
    class="login-form"
  >
    <div class="title-container">
      <h3 class="title">
        {{ t('app.forgetPassword') }}? 🔒
      </h3>
    </div>
    <div>
      <el-form-item prop="account">
        <el-input
          v-model.trim="resetForm.account"
          :placeholder="t('app.account')"
          type="text"
          tabindex="1"
        >
          <template #prefix>
            <el-icon>
              <IkSvgIcon name="iksvg_yonghu" />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="captcha">
        <el-input
          v-model.trim="resetForm.captcha"
          :placeholder="t('app.captcha')"
          type="text"
          tabindex="2"
        >
          <template #prefix>
            <el-icon>
              <IkSvgIcon name="iksvg_xiaoyanma" />
            </el-icon>
          </template>
          <template #append>
            <el-button>{{ t('app.sendCaptcha') }}</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="newPassword">
        <el-input
          v-model.trim="resetForm.newPassword"
          type="password"
          :placeholder="t('app.newPassword')"
          tabindex="3"
          show-password
        >
          <template #prefix>
            <el-icon>
              <IkSvgIcon name="iksvg_suoping" />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
    </div>
    <el-button
      :loading="loading"
      type="primary"
      size="large"
      style="width: 100%; margin-top: 20px;"
      @click.prevent="handleReset"
    >
      {{ t('action.check') }}
    </el-button>
    <div class="sub-link">
      <el-link type="primary" :underline="false" @click="emit('update:formType', 'login')">
        {{ t('app.goLogin') }}
      </el-link>
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
@import './login'
</style>
